import Color from 'Color';
// import { reactive, createApp } from 'vue';

// const app = createApp({});
const gTheme = {};
const defaultThemeColor = '#06CEAE';

const getDefaultTheme = (themeColor) => {
	const primary = Color.get(themeColor || defaultThemeColor);
	const black = Color.get('#121212');
	const white = Color.get('#f8f8f2');
	const transparent = Color.get('#000000');
	const background = Color.get('#000000');
	const dropdownBackground = Color.get('#181818');

	const plainAlpha = 0.08;
	const hoverAlpha = 0.48;
	const activeAlpha = 0.35;
	const middleAlpha = 0.65;
	const highAlpha = 0.78;
	const hideAlpha = 0.85;
	const overlayAlpha = 0.92;
	transparent.alpha = 0;
	background.alpha = 0.2;
	dropdownBackground.alpha = hideAlpha;
	// white.alpha = overlayAlpha

	const primaryPlain = new Color(primary);
	primaryPlain.alpha = plainAlpha;
	const primaryHover = new Color(primary);
	primaryHover.alpha = hoverAlpha;
	const primaryActive = new Color(primary);
	primaryActive.alpha = activeAlpha;
	const primaryMiddle = new Color(primary);
	primaryMiddle.alpha = middleAlpha;
	const primaryHigh = new Color(primary);
	primaryHigh.alpha = highAlpha;
	const primaryHide = new Color(primary);
	primaryHide.alpha = hideAlpha;
	const primaryOverlay = new Color(primary);
	primaryOverlay.alpha = overlayAlpha;

	return {
		primary,
		plainAlpha,
		hoverAlpha,
		activeAlpha,
		middleAlpha,
		highAlpha,
		hideAlpha,
		overlayAlpha,
		transparent,
		black,
		background,
		dropdownBackground,
		white,
		primaryPlain,
		primaryHover,
		primaryActive,
		primaryMiddle,
		primaryHigh,
		primaryHide,
		primaryOverlay
	};
};

const generateTheme = (theme = {}) => {
	const newTheme = Object.assign(theme, getDefaultTheme(theme.primary));
	// const newTheme = theme;

	// console.log('newTheme---------', newTheme);
	// document.documentElement.style.setProperty('--white', '#fff');
	// console.log('getDefaultTheme(theme.primary)---------', getDefaultTheme(theme.primary));
	document.documentElement.style.setProperty('--primary', newTheme.primary);
	document.documentElement.style.setProperty('--black', newTheme.black);
	document.documentElement.style.setProperty('--white', newTheme.white);
	document.documentElement.style.setProperty('--transparent', newTheme.transparent);
	document.documentElement.style.setProperty('--background', newTheme.background);
	document.documentElement.style.setProperty('--dropdown-background', newTheme.dropdownBackground);
	document.documentElement.style.setProperty('--plain-alpha', newTheme.plainAlpha);
	document.documentElement.style.setProperty('--hover-alpha', newTheme.hoverAlpha);
	document.documentElement.style.setProperty('--active-alpha', newTheme.activeAlpha);
	document.documentElement.style.setProperty('--middle-alpha', newTheme.middleAlpha);
	document.documentElement.style.setProperty('--high-alpha', newTheme.highAlpha);
	document.documentElement.style.setProperty('--hide-alpha', newTheme.hideAlpha);
	document.documentElement.style.setProperty('--overlay-alpha', newTheme.overlayAlpha);
	document.documentElement.style.setProperty('--primary-plain', newTheme.primaryPlain);
	document.documentElement.style.setProperty('--primary-hover', newTheme.primaryHover);
	document.documentElement.style.setProperty('--primary-active', newTheme.primaryActive);
	document.documentElement.style.setProperty('--primary-middle', newTheme.primaryMiddle);
	document.documentElement.style.setProperty('--primary-high', newTheme.primaryHigh);
	document.documentElement.style.setProperty('--primary-hide', newTheme.primaryHide);
	document.documentElement.style.setProperty('--primary-overlay', newTheme.primaryOverlay);

	return newTheme;
};

export const setGTheme = (newTheme) => {
	let theme;
	const el = document.documentElement;
	if (typeof newTheme === 'object') {
		theme = generateTheme(newTheme);
		el.style.setProperty('--el-color-primary', newTheme.primary);
	} else {
		theme = generateTheme({ primary: newTheme });
		el.style.setProperty('--el-color-primary', newTheme);
	}
	Object.assign(gTheme, theme);
};

export default getDefaultTheme;
